import React from 'react';
import { Form, Input, Modal } from 'antd';
import { useDispatch } from 'redux-react-hook';

import {
  ac_add_business
} from '@@/store/actions';

const layout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 },
};

const AddForm = (props: any) => {
  const [form] = Form.useForm();
  const dispatch = useDispatch();

  /* --=====================事件处理=====================-- */
  // 处话框确定处理
  const handleModalOkClick = async () => {
    try {
      const formData = await form.validateFields();
      if (formData) {
        dispatch(ac_add_business(formData, dispatch, props.setIsModalVisible));
      }
    } catch (e) {}
  }

  // 对话框取消处理
  const handleModalConcelClick = () => {
    form.resetFields();
    props.setIsModalVisible(false);
  }

  return (
    <Modal visible={props.visible} onOk={handleModalOkClick} onCancel={handleModalConcelClick} >
      <Form
        {...layout}
        name="basic"
        form={form}
        initialValues={{ hotelName: '' }}
      >
        <Form.Item
          label="商家名称"
          name="hotelName"
          rules={[{ required: true, message: '请输入商家名称' }]}
        >
          <Input placeholder="请输入商家名称" maxLength={50} />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddForm;